//顶部广告
var topClose = document.querySelector(".topClose");
var topAd = document.querySelector(".top");
topClose.onclick = function() {
  topAd.style.display = "none";
};
//搜索框
var search = document.querySelector(".search");
var input = document.querySelector("input");
var searchKey = document.querySelector(".search-key");
var searchmore = document.querySelector(".searchmore");
search.onmouseenter = function() {
  search.classList.add("hover");
  input.onclick = function(ev) {
    searchKey.style.display = "none";
    ev.stopPropagation();
  };
};
search.onmouseleave = function() {
  search.classList.remove("hover");
};
input.onfocus = function(ev) {
  search.classList.add("hover");
  searchKey.style.display = "none";
  search.onmouseleave = null;
  searchmore.style.display = "block";
  ev.stopPropagation();
};
input.onblur = function(ev) {
  searchKey.style.display = "block";
  search.onmouseleave = function() {
    search.classList.remove("hover");
  };
  // ev.stopPropagation();
};
document.body.onclick = function(ev) {
  search.classList.remove("hover");
  searchKey.style.display = "block";
  searchmore.style.display = "none";
};
//轮播图
var banner = document.querySelector(".banner");
var img = document.querySelector(".banner .img-wrap");
var lis = document.querySelectorAll(".banner .img-wrap li");
var dotsWrap = document.querySelector(".banner .dots");
var current = document.querySelectorAll(".banner .dots-wrap .dots li");
var prev = document.querySelector(".btn-prev");
var next = document.querySelector(".btn-next");
var index = 0;
var lastIndex = index;
var timer = null;
function prevImg() {
  index = index == 0 ? lis.length - 1 : index - 1;
  showImg();
}
function nextImg() {
  index = index == lis.length - 1 ? 0 : index + 1;
  showImg();
}
function showImg() {
  lis[lastIndex].className = "";
  current[lastIndex].className = "";
  lis[index].className = "slide-active";
  // console.log(index);
  current[index].className = "dots-active";
  lastIndex = index;
}
timer = setInterval(nextImg, 3000);
prev.onclick = function() {
  prevImg();
};
next.onclick = function() {
  nextImg();
};
for (var i = 0; i < current.length; i++) {
  current[i].index = i;
  current[i].onmouseenter = function() {
    index = this.index;
    showImg();
  };
}
banner.onmouseenter = function() {
  clearInterval(timer);
  timer = null;
};
banner.onmouseleave = function() {
  if (timer) {
    return;
  }
  timer = setInterval(nextImg, 3000);
};
//小轮播图
var subBanner = document.querySelector(".subBanner");
var img2 = document.querySelector(".subBanner .img-wrap");
var lis2 = document.querySelectorAll(".subBanner .img-wrap li");
var dotsWrap2 = document.querySelector(".subBanner .dots");
var current2 = document.querySelectorAll(".subBanner .dots-wrap .dots li");
var index3 = 0;
var lastIndex3 = index3;
var timer2;
console.log(current2);
function nextImg2() {
  index3 = index3 == lis2.length - 1 ? 0 : index3 + 1;
  showImg2();
}
function showImg2() {
  lis2[lastIndex3].className = "";
  current2[lastIndex3].className = "";
  lis2[index3].className = "slide-active";
  // console.log(index);
  current2[index3].className = "dots-active";
  lastIndex3 = index3;
}
timer2 = setInterval(nextImg2, 3000);
for (var i = 0; i < current2.length; i++) {
  current2[i].index3 = i;
  current2[i].onmouseenter = function() {
    index3 = this.index3;
    showImg2();
  };
}
//公告
var noticeul = document.querySelector(".notice-list");
var noticelis = document.querySelectorAll(".notice-list li");
var time = null;
var sum = 0;
for (var i = 0; i < noticelis.length; i++) {
  noticelis[i].index = i;
  noticelis[i].setAttribute("attr-top", noticelis[i].offsetTop);
}
time = setInterval(showNotice, 1000);
function showNotice() {
  if (noticeul.style.marginTop == "-215px") {
    noticeul.style.marginTop = noticelis[0].getAttribute("attr-top");
    sum = 0;
  } else {
    if (sum % 1 == 0 && sum != 0) {
      clearInterval(time);
      setTimeout(() => {
        time = setInterval(showNotice, 1000);
      }, 3000);
    }
    sum += 0.5;
    noticeul.style.marginTop = "-" + 43 * (sum - 0.5) + "px";
  }
}
//精品推荐
var contentRolling = document.querySelector(".content-rolling");
var ul = contentRolling.querySelector("ul");
var li = contentRolling.querySelectorAll("li");

var prevBtn = contentRolling.querySelector(".prev");
var nextBtn = contentRolling.querySelector(".next");
var index2 = 0;

prevBtn.onclick = function() {
  previmg();
};
nextBtn.onclick = function() {
  nextimg();
};

function nextimg() {
  index2 = index2 == li.length - 1 ? 0 : index2 + 1;
  showimg();
}
function previmg() {
  index2 = index2 == 0 ? li.length - 1 : index2 - 1;
  showimg();
}
function showimg() {
  ul.style.left = -li[0].offsetWidth * index2 + "px";
}
//智能穿戴
var ul5 = document.querySelector(".morechoose ul");
var li5 = document.querySelectorAll(".morechoose li");

var prevBtn5 = document.querySelector(".morechoose .prev");
var nextBtn5 = document.querySelector(".morechoose .next");
var index5 = 0;
prevBtn5.onclick = function() {
  previmg5();
};
nextBtn5.onclick = function() {
  nextimg5();
};
function nextimg5() {
  index5 = index5 == li5.length - 1 ? 0 : index5 + 1;
  showimg5();
}
function previmg5() {
  index5 = index5 == 0 ? li5.length - 1 : index5 - 1;
  showimg5();
}
function showimg5() {
  ul5.style.left = -li5[0].offsetWidth * index5 + "px";
}
//智能家居
var ul6 = document.querySelector(".morechoose1 ul");
var li6 = document.querySelectorAll(".morechoose1 li");

var prevBtn6 = document.querySelector(".morechoose1 .prev");
var nextBtn6 = document.querySelector(".morechoose1 .next");
var index6 = 0;
prevBtn6.onclick = function() {
  previmg6();
};
nextBtn6.onclick = function() {
  nextimg6();
};
function nextimg6() {
  index6 = index6 == li6.length - 1 ? 0 : index6 + 1;
  showimg6();
}
function previmg6() {
  index6 = index6 == 0 ? li6.length - 1 : index6 - 1;
  showimg6();
}
function showimg6() {
  ul6.style.left = -li6[0].offsetWidth * index6 + "px";
}
//热销配件
var ul7 = document.querySelector(".morechoose2 ul");
var li7 = document.querySelectorAll(".morechoose2 li");

var prevBtn7 = document.querySelector(".morechoose2 .prev");
var nextBtn7 = document.querySelector(".morechoose2 .next");
var index7 = 0;
prevBtn7.onclick = function() {
  previmg7();
};
nextBtn7.onclick = function() {
  nextimg7();
};
function nextimg7() {
  index7 = index7 == li7.length - 1 ? 0 : index7 + 1;
  showimg7();
}
function previmg7() {
  index7 = index7 == 0 ? li7.length - 1 : index7 - 1;
  showimg7();
}
function showimg7() {
  ul7.style.left = -li7[0].offsetWidth * index7 + "px";
}
//生态精品
var ul8 = document.querySelector(".morechoose3 ul");
var li8 = document.querySelectorAll(".morechoose3 li");

var prevBtn8 = document.querySelector(".morechoose3 .prev");
var nextBtn8 = document.querySelector(".morechoose3 .next");
var index8 = 0;
prevBtn8.onclick = function() {
  previmg8();
};
nextBtn8.onclick = function() {
  nextimg8();
};
function nextimg8() {
  index8 = index8 == li8.length - 1 ? 0 : index8 + 1;
  showimg8();
}
function previmg8() {
  index8 = index8 == 0 ? li8.length - 1 : index8 - 1;
  showimg8();
}
function showimg8() {
  ul8.style.left = -li8[0].offsetWidth * index8 + "px";
}
//精选配件
var ul9 = document.querySelector(".morechoose4 ul");
var li9 = document.querySelectorAll(".morechoose4 li");

var prevBtn9 = document.querySelector(".morechoose4 .prev");
var nextBtn9 = document.querySelector(".morechoose4 .next");
var index9 = 0;
prevBtn9.onclick = function() {
  previmg9();
};
nextBtn9.onclick = function() {
  nextimg9();
};
function nextimg9() {
  index9 = index9 == li9.length - 1 ? 0 : index9 + 1;
  showimg9();
}
function previmg9() {
  index9 = index9 == 0 ? li9.length - 1 : index9 - 1;
  showimg9();
}
function showimg9() {
  ul9.style.left = -li9[0].offsetWidth * index9 + "px";
}
// 返回顶部
var contentItems = document.querySelectorAll(".content-item");
var contentNav = document.querySelector(".content-nav");
var hoverList = document.querySelector(".hover-list");
var lislist = hoverList.querySelectorAll("li");
var scrollHight = document.querySelector(".content").offsetTop;
var asideNav = document.querySelector(".aside-nav");
var navs = asideNav.querySelector("ul").querySelectorAll("li");
var scrollTop = document.documentElement.scrollTop;
var lastlist = document.querySelector(".last-list");
var s3 = 0;


var itemHeights = [];
for (var i = 0; i < contentItems.length; i++) {
  console.log(contentItems[i].offsetTop);
  console.log(contentItems[i].getBoundingClientRect().top);
  itemHeights.push(contentItems[i].offsetTop + 2000);
}

var speed = 0;
var timer3 = null;
var lastindex4 = 0;
for (var i = 0; i < lislist.length; i++) {
  lislist[i].index = i;
  lislist[i].onclick = function() {
    var that = this;

    speed = (this.index - lastindex4) * 50;
    console.log(speed);
    if (timer3) return;
    updated();
    function updated() {
      document.scrollingElement.scrollTop += speed;
      timer3 = requestAnimationFrame(updated);

      var isStop =
        (speed > 0 &&
          contentItems[that.index].getBoundingClientRect().top <= 50) ||
        (speed < 0 && contentItems[that.index].getBoundingClientRect().top >= 50);
      if (isStop) {
        cancelAnimationFrame(timer3);
        timer3 = null;

        lastindex4 = that.index;
        document.scrollingElement.scrollTop = itemHeights[that.index] - 50;
      }
    }
  };
}

var index10 = 0;
window.onscroll = function() {
  var scrollTop = document.scrollingElement.scrollTop;
  var offsetTop = itemHeights[0];

  if (scrollTop + 200 > offsetTop) {
    contentNav.style.right = 0;
  } else {
    contentNav.style.right = "-100px";
  }

  for (var i = 0; i < itemHeights.length; i++) {
    lislist[i].className = "";
    if (scrollTop + 200 > itemHeights[i]) {
      // console.log(i);
      index10 = i;
    }
  }

  lislist[index10].className = "content-hover";

  if (scrollTop>= 800) {
        lastlist.style.display='block'
      } else {
        lastlist.style.display='none'
      }
};



console.log(`
华为商城评分细节：        
一、顶部广告共2分         2

二、首页一栏的导航共8分  
  1.页面效果4分         4 
  2.二级菜单功能4分      4
    
三、华为logo一栏的导航共8分     
  1.页面效果4分             4
  2.搜索框点击功能4分       3

四、轮播图9分  
  1.指示灯3分            3  
  2.按钮3分             3
  3.自动3分             2

五、二级菜单共12分  
  1.页面效果6分        6
  2.功能6分           5

六、登录注册一栏共10分  
  1.页面效果4分    4
  2.公告6分        5

七、热销单品：效果+功能4分    4

八、精品推荐共8分   
  1.页面效果2分               2
  2.左右点击轮播6分           5

九、精品推荐下方小轮播6分      6

十、手机一栏效果+功能共6分      5

十一、右侧边导航共13分     
  1.滚动页面显示和隐藏效果效果4分      4
  2.点击动画至转对应内容5分          5
  3.红条小动画4分                    4

十二、右侧边底部购物车返回顶部共8分   
  1.固定位置及其他页面效果4分             4
  2.返回顶部按钮及二级文字效果4分         3

十三、页面底部共6分              5

总分：                  92        
`);
